<template>
    <div>
        <el-row type="flex" class="row-bg" justify="space-around">
            <el-col :span="1">
                <div class="grid-content bg-purple">
                    <el-upload action accept=".xlsx,.xls" :auto-upload="false" :show-file-list="false"
                        :on-change="selectFile">
                        <el-button type="primary">选取EXCEL文件</el-button>
                    </el-upload>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content bg-purple">
                    <el-button type="success" @click="postdata">采集数据提交</el-button>
                </div>
            </el-col>
            <el-col :span="1">
                <el-tooltip class="item" effect="dark" content="返回列表页面" placement="top">
                    <router-link to="/"><i class="el-icon-document seleFile"></i></router-link>
                </el-tooltip>
            </el-col>
        </el-row>
        <div v-show="Loadshow" class="tableBox">
            <h3>
                <i class="el-icon-info">
                    您好，以下是采集完成的数据，请您检查无误后，点击“采集数据提交”按钮上传至服务器</i>
            </h3>
            <el-table :data="tableData" tooltip-effect="dark" style="width: 100%" :border="true"  @selection-change="getdata">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="编号" type="index">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="phone" label="电话" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="data" label="创建时间" show-overflow-tooltip>
                    <!--<template slot-scope="scope">{{ scope.row.date }}</template>-->
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import {readfile,character} from "../ults/api";
    import xlsx from 'xlsx';
    export default {
        data() {
            return {
                Loadshow: true,
                tableData: [], //excle读取出来的数据
                postData:[]    //采集提交的数据
            }
        },
        //生命周期 - 创建完成（访问当前this实例）
        created() {
            let data = window.sessionStorage.getItem("excl") || [];
            data = data.length ? JSON.parse(data) : [];
            this.tableData = data;
        },
        methods: {
            //选取excle文件
            async selectFile(e) {
                let file = e.raw;
                if (!file) {
                    return;
                }
                let codetext = await readfile(file);
                //console.log(codetext);
                //转化为可识别的格式，
                //
                let workbook = xlsx.read(codetext,{type:"binary"}),
                worksheet = workbook.Sheets[workbook.SheetNames[0]],
                list = xlsx.utils.sheet_to_json(worksheet)
                //console.log(list);
                let arr = [];
                list.forEach((item)=>{
                    let obj = {};
                    for(let key in character){
                        let v = character[key],
                        text = v.text,
                        type = v.type
                        type === "string" ? new String(item[text]) : null;
                        type === "number" ? new Number(item[text]) : null;
                        obj[key] = item[text];
                    }
                    obj.id = Math.random();
                    obj.data = new Date();
                    arr.push(obj);
                })
                this.tableData = [...this.tableData,...arr];
            },
            //采集数据
            getdata(val) { 
               if(val.length>0){
                   this.postData = val;
               }else{
                   this.postData = [];
               }
            },
            //数据提交
            postdata(){
                if(this.postData.length>0){
                    let data = this.postData;
                    let v = window.sessionStorage.getItem("excl") || [];
                    v = v.length ? JSON.parse(v) : [];
                    data = [...data,...v];
                    window.sessionStorage.setItem('excl',JSON.stringify(data));
                    console.log("数据提交成功");
                }else{
                    console.log('数据提交不得为空');
                }
            }
        }
    }
</script>
<style scoped>
    .tableBox {
        margin-top: 20px;
        color: red;
    }

    /* @import url(); 引入css类 */
    .seleFile {
        transform: scale(2.5);
        margin-top: 10px;
    }
</style>